<template>
  <view class="student-list">
        <view class="title">
            <span class="title-text">{{titleTextFlag === '1'? '已认证同学' : '未认证同学'}}</span>
            <span class="quantity">(21)</span>
        </view>
        <view class="list">
            <view class="student-info" v-for="(item,index) in list" :key="index">
                <img class="avatar" :src="imgUrlBase + 'default_avatar.png'">
                <span class="name">张天师</span>
                <img v-if="titleTextFlag === '1'" class="status" :src="imgUrlBase + 'icon_review.png'">
            </view>
        </view>
  </view>
</template>

<script>
export default {
    props:{
        titleTextFlag:{
            type: String,
            default: '0'
        }
    },
    data(){
        return {
            imgUrlBase: this.$imgUrlBase,
            list:[1,2,3,4,5,6,7]
        }
    }
}
</script>

<style lang="scss" secoped>
    .student-list{
        padding: 0 42rpx 27rpx;
        background-color: #fff;
        margin-bottom: 11rpx;
        .title{
            height: 109rpx;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            .title-text{
                font-size:28rpx;
                font-weight:bold;
                color:rgba(0,202,171,1);
            }
            .quantity{
                font-size:26rpx;
                color:rgba(198,197,197,1);
                margin-left: 16rpx;
            }
        }
        .list{
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;
            .student-info{
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                margin:0 78rpx 36rpx 0;
                position: relative;
                .avatar{
                    width: 107rpx;
                    height: 107rpx;
                    border-radius: 50%;
                    margin-bottom: 21rpx;
                }
                .name{
                    font-size:26rpx;
                    color:rgba(80,80,80,1);
                }
                .status{
                    position: absolute;
                    top: -4rpx;
                    right: -30rpx;
                    width: 89rpx;
                    height: 40rpx;
                }
            }
            .student-info:nth-child(4n){
                margin-right: 0;
            }
        }
    }
</style>